<template>
	<view>
		<!-- 话题详情 -->
		<swiper autoplay="true" :indicator-dots='indicatordots' circular="true" style="height: 750upx;">
			<swiper-item v-for="(img,key) in topicList" :key="key">
				<image :src="img" style="width: 100%;display: inline-block;vertical-align: middle;height: 750upx;" mode="widthFix"/>
			</swiper-item>
		</swiper>
		
		<view style="height: 100upx;line-height: 100upx;border-bottom: 1upx solid #dddddd;">
			<image src="../../static/01.png" style="width: 62upx;height: 62upx;vertical-align: middle;margin-left: 30upx;" mode=""></image>
			<text style="margin: 0upx 35upx;">生物伞MAGICALAB</text>
			<image src="../../static/vip.png" style="width: 30upx;height: 30upx;vertical-align: middle;" mode=""></image>
		</view>
		
		<view style="width: 100%;">
			<image :src="label_detail" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view class="d-header" style="margin: 30upx 0upx;">
			<text>参与分享帖子</text>
		</view>
		
		<view class="goods-list">
			<view
				v-for="(item, index) in res" :key="index"
				class="goods-item"
			>
				<view class="image-wrapper">
					<image :src="item.images[0]" mode="widthFix" @click="to_detail(item)"></image>
				</view>
				<view style="width: 100%;display: flex;padding: 30upx 30upx 0;">
					<view style="flex: 3;">
						<image style="width: 40upx; height: 40upx; border-radius: 50%; margin-right: 10upx;vertical-align: middle;"
							:src="item.real_head_img"></image>
						{{item.real_name}}
					</view>
					<view style="flex: 1;text-align: right;" >
						<!-- 2为点赞状态 -->
						<image style="width: 35upx;height: 35upx;" src="../../static/dianzan.png" mode="" v-if="item.is_like == 1" @click.stop="yes_no(item)"></image>
						<image style="width: 35upx;height: 35upx;" src="../../static/dianzan1.png" mode="" v-if="item.is_like == 2" @click.stop="yes_no(item)"></image>
						<text style="margin-left: 15upx;">{{item.likeCount}}</text>
					</view>
				</view>
				<view style="margin-left: 30upx;">
					<text class="title clamp">{{item.title}}</text>
				</view>
			</view>
		</view>
		
		<!-- <waterfall-flow
		:waterList="res"
		:dianzan="dianzan"
		@yes_no="yes_no"
		@to_detail="to_detail"
		></waterfall-flow> -->
		
		<view style="width: 100%;height: 130upx;"></view>
		<view style="width: 100%;position: fixed;bottom: 0;height: 120upx;line-height: 120upx;background-color: #000000;color: #FFFFFF;font-size: 36upx;text-align: center;z-index: 999999;" @click="jumpto_publish">
			立即参与
		</view>
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	// import WaterfallFlow from '@/components/nairenk-waterfall-flow/nairenk-waterfall-flow.vue';
	export default {
		components: {
			uniLoadMore,
			// WaterfallFlow
		},
		data() {
			return {
				indicatordots:false,
				res:[],
				res_lis:{},
				user_id:'',
				article_id: '',
				topicList:[],
				label_detail:'',
				dianzan: false,
				count: 2,
				
				loadingText: '加载中...',
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				page: 1,
				timer:{},
				
			};
		},
		onLoad(e) {
			this.article_id = e.article
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
				},
			});
			uni.showLoading()
			this.setAjax()
		},
		// onShow:function(e){
		// 	this.setarticlelist()
		// },
		// 下拉加载
		onPullDownRefresh() {
			this.page = 1
			this.loadingType = 0;//将loadingType归0重置
			let o = this
			setTimeout(function () {
				o.setAjax();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom(){
			if (this.timer != null) {
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(()=> {
				this.getmorenews()
			}, 1000);
		},
		methods:{
			setAjax(){
				let o = this
				// 获取话题列表
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Label/labelDetail',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						label_id: this.article_id,
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						this.res_lis = res.data.data
						// 详情的一张图
						this.label_detail = 'https://cx.mingmeijt.com' + res.data.data.label_detail
						// 轮播图
						this.topicList = res.data.data.label_images
						for(let i = 0; i < o.topicList.length; i++) {
							o.topicList[i] = 'https://cx.mingmeijt.com' + o.topicList[i]
						}
						o.setarticlelist()
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			// 上拉加载更多
			getmorenews() {
				let o = this
				this.page++; // 每触底一次 page +1
				if (this.loadingType !== 0) { // loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading(); // 显示加载动画
				uni.request({
					url:'https://cx.mingmeijt.com/Api/LabelPaper/index?p=' + this.page,
					method: 'POST',
					data: {
						user_id: this.user_id,
						label_id: this.article_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: function(res) {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if (res.data.data.list.list == '' || res.data.data.list.list == null) {//没有数据
							o.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						var tpcList = res.data.data.list.list
						for(var i=0; i<tpcList.length; i++) {
							tpcList[i].images[0] = 'https://cx.mingmeijt.com' + tpcList[i].images[0]
							if (tpcList[i].user_name && tpcList[i].user_name.length > 5) {
								tpcList[i].user_name = tpcList[i].user_name.substring(0,5)
							}
						}
						o.res = o.res.concat(tpcList); // 将数据拼接在一起
						o.loadingType = 0; // 将loadingType归0重置
						uni.hideNavigationBarLoading(); // 关闭加载动画
					}
				});
			},
			setarticlelist () {
				// 文章列表
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/index?p=' + this.page,
					method: 'POST',
					data:{
						user_id: this.user_id,
						label_id: this.article_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.res = res.data.data.list.list
						let tpcList = this.res
						console.log(tpcList)
						for(var i=0; i<tpcList.length; i++) {
							tpcList[i].images[0] = 'https://cx.mingmeijt.com' + tpcList[i].images[0]
							if (tpcList[i].user_name && tpcList[i].user_name.length > 5) {
								tpcList[i].user_name = tpcList[i].user_name.substring(0,5)
							}
						}
						this.res = tpcList
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			jumpto_publish (id) {
				uni.setStorage({
					key: 'label_id_essay',
					data: this.res_lis.id
				})
				uni.setStorage({
					key: 'label_name_essay',
					data: this.res_lis.label_name
				})
				uni.removeStorage({key: 'label_avatar'})
				uni.navigateTo({
					url:'/pagesA/user/shequ/details/details'
				})
			},
			to_detail(item){
				uni.navigateTo({
					url:'/pagesA/user/shequ/wenzhang/wenzhang?articleid=' + item.id
				})
			},
			yes_no(item) {
				// 1 非点赞状态
				if (item.is_like == 1) {
					this.like(item)
					return
				}
				if (item.is_like == 2) {
					this.nolike(item)
					return
				}
			},
			like(item) {
				// 设为点赞状态
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/clickLike',
					method: 'POST',
					data:{
						paper_id: item.id,
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code == 200) {
							this.$set(item, 'is_like', 2)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			nolike(item) {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/cancelLike',
					method: 'POST',
					data:{
						paper_id: item.id,
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code == 200) {
							this.$set(item, 'is_like', 1)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.goods-list{
		display:flex;
		flex-wrap:wrap;
		padding: 0 5upx;
		background: #fff;
		.goods-item{
			display:flex;
			flex-direction: column;
			width: 49%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 1%;
			}
		}
		.image-wrapper{
			margin-left: 3.5%;
			width: 95%;
			height: 460upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $font-color-light;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
			&:before{
				content: '￥';
				font-size: 26upx;
			}
		}
	}
	
	
	
	.waterfall-wrapper {
		padding: 10upx;
		background: #f2f3f4;
	}

	.d-header{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		font-size: $font-base + 8upx;
		color: $font-color-dark;
		position: relative;
			
		text{
			font-weight: 500;
			padding: 0 20upx;
			background: #fff;
			position: relative;
			z-index: 1;
		}
		// &:after{
		// 	position: absolute;
		// 	left: 50%;
		// 	top: 50%;
		// 	transform: translateX(-50%);
		// 	width: 600upx;
		// 	height: 0;
		// 	content: '';
		// 	border-bottom: 1px solid #ccc;
		// }
	}
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			// float: left;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			// height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg - 4upx;
			color: #000000;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg - 4upx;
			color: #000000;
			line-height: 1;
		}
	}
</style>
